<template>
  <div class="color-gradient">
    <el-form size="mini" label-width="40px" class="dradient-form">
      <el-form-item label="角度" class="some">
        <el-input v-model="deg" type="number" style="width:calc(100% - 60px);display: inline-block"></el-input>
        <el-popover placement="bottom-end" v-model="show" width="240" popper-class="color-gradient-dialog">
          <el-button slot="reference" size="mini" type="primary" plain style="margin-left: 3px">预设</el-button>
          <div
            class="item" v-for="(item,i) of preDeg" :key="i" :style="{backgroundImage:countPreStyle(item)}"
            @click="deg=item.deg"
          ></div>
        </el-popover>
      </el-form-item>
      <el-form-item label="颜色">
        <span class="color-span" v-for="(item,i) of colors" :key="i">
          <el-color-picker v-model="item.color" size="mini" show-alpha></el-color-picker>
          <i class="el-icon-close" style="margin-left: 2px;color:red;cursor:pointer;" @click="onDelColor(i)"></i>
        </span>
        <el-button style="display: block" size="mini" type="success" plain icon="el-icon-plus" @click="onAddColor">
          添加颜色
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  model: {prop: 'gradient', event: 'change'},
  props: ['gradient'],
  data() {
    return {
      colors: [],
      deg: 0,
      show: false,
      preDeg: [
        {label: 'to top', deg: 0},
        {label: 'to top right', deg: 45},
        {label: 'to right', deg: 90},
        {label: 'to bottom right', deg: 135},
        {label: 'to bottom', deg: 180},
        {label: 'to bottom left', deg: 225},
        {label: 'to left', deg: 270},
        {label: 'to top left', deg: 315},
      ],
    };
  },
  watch: {
    deg() {
      this.countSetting();
    },
    'colors': {
      handler() {
        this.countSetting();
      },
      deep: true
    }
  },
  created() {
    let arr = /\((.*)\)/g.exec(this.gradient || '');
    if (!arr || !arr[1]) {
      this.deg = 0;
      this.colors = [{color: 'rgba(87,169,255,1)'}, {color: 'rgba(255,255,255,0)'}];
    } else {
      let [deg, ...colors] = arr[1].split(',').map(i => i.trim());
      let nowDeg = parseInt(deg.replace('deg', ''));
      this.deg = nowDeg || this.countDeg(deg);
      this.colors = colors.map(i => ({color: i}));
    }
  },
  methods: {
    countPreStyle({deg}) {
      let finalColors = this.colors.map(i => i.color);
      if (finalColors.length <= 1) {
        finalColors.push('rgba(255,255,255,0)');
      }
      return `linear-gradient(${deg}deg,${finalColors.join(',')})`;
    },
    onAddColor() {
      this.colors.push({color: 'rgba(255,255,255,1)'});
    },
    onDelColor(index) {
      if (this.colors.length <= 1) {
        return this.$message({type: 'warning', message: '至少需要一种颜色'});
      }
      this.colors.splice(index, 1);
    },
    countDeg: function (deg) {
      let now = this.preDeg.find(i => i.label == deg);
      return now ? now.deg : 0;
    },
    countSetting() {
      let {deg, colors} = this;
      let finalColors = colors.map(i => i.color);
      if (finalColors.length <= 1) {
        finalColors.push('rgba(255,255,255,0)');
      }
      let str = `linear-gradient(${deg}deg,${finalColors.join(',')})`;
      this.$emit('change', str);
    }
  }
};
</script>
<style lang="scss">
.color-gradient-dialog {
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 50px;
    height: 50px;
    margin: 5px;
    cursor: pointer;
  }
}
.color-gradient {
  .dradient-form {
    .el-form-item {
      margin-bottom: 10px;
    }
    .el-form-item__label {
      font-size: 12px;
    }
    .color-span {
      margin-right: 5px;
      display: inline-flex;
      align-items: center
    }
  }
}
</style>